import React, { useState, useEffect } from 'react';

import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space, Modal } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import request from '../../../http';
import Xinzheng from '../teacherInfo/xinzheng';

//李鸿 管理员 教师信息管理

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

//表格数据
function info() {
  Modal.info({
    title: '查看学生',
    content: (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    ),
    onOk() {},
  });
}

const columns2 = [
  {
    title: '老师姓名',
    width: 100,
    dataIndex: 'userName',
    key: '1',
    fixed: 'left',
  },
  {
    title: '工号',
    width: 100,
    dataIndex: 'account',
    key: '2',
    fixed: 'left',
  },

  { title: '身份证号码', dataIndex: 'cardid', key: '3' },
  { title: '性别', dataIndex: 'sex', key: '4' },
  { title: '手机号', dataIndex: 'tel', key: '5' },
  { title: '职位', dataIndex: 'type', key: '6' },
  { title: '状态', dataIndex: 'state', key: '7' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 250,
    render: (text, record) => (
      <Space size="middle">
        <Button type="link" onClick={info}>
          编辑
        </Button>
        <Button type="link" onClick={info}>
          停用
        </Button>
        <Button type="link" onClick={info}>
          重置密码
        </Button>
      </Space>
    ),
  },
];

const teacherInfo = () => {
  //新增按钮弹窗
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [modalText, setModalText] = React.useState('Content of the modal');

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    //02添加教师 缺请求参数
    request
      .post('/TeacherManage/admin/addTeacher', {
        teacherName: acdate.teacherName, //教师姓名
        account: acdate.account, //工号
        cardid: acdate.cardid, //身份证号码
        sex: acdate.sex, //性别
        tel: acdate.tel, //手机号码
        type: acdate.type, //职位
      })
      .then(
        (result: any) => {
          console.log('教师管理，新增按钮接口result数据', result);
          if (result.success) {
            alert('新增教师成功');
            //获得成功响应返回的数据
            console.log('教师管理，新增按钮接口result.data数据', result.data);
          }
        },
        (error) => {
          //错误返回错误信息
          console.log('请求错误');
        },
      );

    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  //初始化分页
  const [pagination, setPagination] = React.useState({
    current: 1, //当前页码
    total: 1, //页码总数
    pageSize: 10, //一页多少条数据
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  //封装界面公共的接口方法
  const loadDataSource = (parms: any) => {
    request
      .post('/TeacherManage/admin/lookTeacherInformation', parms)
      .then((result: any) => {
        console.log(result);

        //获取教师信息接口传来的数据
        const data4 = result.data.returnDate.map((item: any) => ({
          key: `p_${item.id}`,
          userName: item.userName,
          account: item.account,
          cardid: item.cardid,
          sex: item.sex,
          tel: item.tel,
          type: item.type,
          state: item.state === 0 ? '有效' : '无效',
        }));

        //获取分页请求的数据
        const newPageObject = {
          ...pagination,
          current: parms.page,
          pageSize: parms.number,
          total: result.data.paginationData.sum,
        };

        //放分页的数据
        setPagination(newPageObject);
        //放教师信息的数据
        setData2(data4);
      })
      .catch((err) => console.log(err));
  };

  //教师状态下拉框接口
  const getState = () => {
    request
      .get('/TeacherManage/admin/getTeacherState')
      .then((result: any) => {
        console.log(result);

        const dataState = result.data.map((item: any) => ({
          key: `p_${item.id}`,
          state: item.teacherType,
        }));
        setDataState(dataState);
      })
      .catch((err) => console.log(err));
  };
  const [dataState, setDataState] = React.useState();

  //新增教师子模块数据
  const [acdate, setacdate] = React.useState({});

  //获取新增课程传来的参数
  function getValues(value: any) {
    setacdate(value[0]);
    console.log('更改参数');
    console.log(acdate);
  }

  React.useEffect(() => {
    const parms = {
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };
    //调用公共的接口，填入请求的参数
    loadDataSource(parms);

    //教师信息管理接口
    {
      /*
    //02添加教师 缺请求参数
    request
    .post('/TeacherManage/admin/addTeacher', parms)
    .then(
      (result: any) => {
        console.log("课程管理，新增按钮接口result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，新增按钮接口result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
           
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //03管理员编辑教师信息 缺请求参数
    request
    .post('/TeacherManage/admin/changeTeacherInformation',parms)
    .then(
      (result: any) => {
        console.log("课程管理，选择学生超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，选择学生超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
            
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //04管理员重置教师密码 缺请求参数
    request
    .post('//TeacherManage/admin/changeTeacherPassword', parms)
    .then(
      (result: any) => {
        console.log("课程管理，编辑超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，编辑超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //05管理员更改教师状态 缺请求参数
    request
    .post('/TeacherManage/admin/changeTeacherState', parms)
    .then(
      (result: any) => {
        console.log("课程管理，删除超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，删除超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //06性别下拉框 缺请求参数
    request
    .post('/TeacherManage/admin/getSex', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    
    //07教师状态下拉框 缺请求参数
    request
    .post('/TeacherManage/admin/getTeacherState', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );


    //08教师职位下拉框 缺请求参数
    request
    .post('/TeacherManage/admin/getTeacherType', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    
    //09管理员查询教师信息 缺请求参数
    request
    .post('/TeacherManage/admin/lookTeacherInformation', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    */
    }
  }, []);

  //教师接口存的数据
  const [data4, setData2] = React.useState();

  //改变页码，页码条数接口的事件
  //绑分页接口
  const pageOnChange = (page: any) => {
    const parms = {
      //请求参数
      number: page.pageSize, //一页10行
      page: page.current, //第一页
    };
    //调接口
    loadDataSource(parms);
  };

  //绑查询接口
  const onSubmit = (value: any) => {
    //获取表单输入的信息
    console.log(value);
    const parms = {
      ...value, //更新value里面的值

      //定义请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };
    //调接口
    loadDataSource(parms);
  };

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  return (
    <div>
      <div>
        <Form onFinish={onSubmit} {...formItemLayout}>
          <div style={{ marginLeft: '8px', float: 'left', width: '1400px' }}>
            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="teacherName" label="老师姓名：">
                <Input placeholder="模糊查询，左匹配两个字"></Input>
              </Form.Item>
              <Form.Item name="state" label="状态：">
                <Select placeholder="请选择" onChange={getState} allowClear>
                  {/*
                  dataState.map( datasObj => {
                    return <Option key={datasObj.id} value={datasObj.teacherType}>{datasObj.teacherType}</Option>
                  })
                  */}
                  <Option value="0">有效</Option>
                  <Option value="1">无效</Option>
                </Select>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="account" label="工号：">
                <Input placeholder="精准查询"></Input>
              </Form.Item>
              <Form.Item name="tel" label="手机号：">
                <Input placeholder="精准查询"></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="cardid" label="身份证号：">
                <Input placeholder="精准查询"></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '10px' }}
                >
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </div>
              </Form.Item>
            </div>
            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '30px' }}
                >
                  <Button type="default" htmlType="submit">
                    重置
                  </Button>
                </div>
              </Form.Item>
            </div>

            <div style={{ clear: 'left', width: '50px' }}>
              <div style={{ float: 'left', width: '50px', marginLeft: '0px' }}>
                <Form.Item {...tailLayout}>
                  <Button type="primary" onClick={showModal}>
                    +新增
                  </Button>
                  <Modal
                    title="教师信息维护"
                    visible={visible}
                    onOk={handleOk}
                    width={1000}
                    okText={'确认'}
                    cancelText={'取消'}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                  >
                    <p>
                      {<Xinzheng callback={getValues} callback={getValues} />}
                    </p>
                  </Modal>
                </Form.Item>
              </div>
            </div>
          </div>
        </Form>
      </div>

      <div
        style={{
          marginLeft: '8px',
          float: 'left',
          height: '50px',
          width: '99%',
          backgroundColor: '#ebf6f7 ',
        }}
      >
        <div style={{ marginTop: '8px' }}>
          <Button type="text">已选择4项</Button>
          <Button type="link">清空</Button>
        </div>
      </div>
      {/* 表格 */}
      <div style={{ marginLeft: '8px' }}>
        <Table
          columns={columns2}
          dataSource={data4}
          /*分页组件*/
          pagination={pagination}
          onChange={pageOnChange}
          scroll={{ x: 1300 }}
        />
      </div>
    </div>
  );
};

export default teacherInfo;
